{extend name="public/base"/}
{block name="content"}
<div class="data-list layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">按订单</li>
        <li>按重量</li>
        <li>按商品</li>
        <li>商品预定价</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form inline-form">
                <div class="pull-left">
                    <div class="layui-inline">
                        <input type="text" name="order_sn" class="layui-input input-order-sn" autocomplete="off" autofocus="autofocus" placeholder="订单号">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal layui-btn-sm calculate" c-type="order"><i class="layui-icon layui-icon-cellphone-fine"></i>试算
                        </button>
                    </div>
                </div>
            </form>
            <div id="channel-order"></div>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form inline-form">
                <div class="pull-left">
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <select name="country_code" lay-search="">
                                <option value="">国家</option>
                                {foreach $countries as $c}
                                <option value="{$c.code_two}">{$c.name_ch}</option>
                                {/foreach}
                            </select>
                            <div class="layui-form-select">
                                <div class="layui-select-title">
                                    <input type="text" placeholder="国家" value="" class="layui-input">
                                    <i class="layui-edge"></i>
                                </div>
                                <dl class="layui-anim layui-anim-upbit">
                                    <dd lay-value="" class="layui-select-tips">国家</dd>
                                    {foreach $countries as $c}
                                    <dd lay-value="{$c.code_two}" class="">{$c.name_ch}</dd>
                                    {/foreach}
                                </dl>
                            </div>

                        </div>
                    </div>
                    <div class="layui-inline">
                        <input type="number" name="weight" class="layui-input input-order-sn" autocomplete="off" autofocus="autofocus" placeholder="重量(g)">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal layui-btn-sm calculate" c-type="weight">
                            <i class="layui-icon layui-icon-cellphone-fine"></i>试算
                        </button>
                    </div>
                </div>
            </form>
            <div id="channel-weight"></div>
        </div>

        <div class="layui-tab-item">
            <form class="layui-form inline-form">
                <div class="pull-left">
                    <div class="layui-inline">
                        <select name="country_code" lay-search="">
                            <option value="">国家</option>
                            {foreach $countries as $c}
                            <option value="{$c.code_two}">{$c.name_ch}</option>
                            {/foreach}

                        </select>
                        <div class="layui-form-select">
                            <div class="layui-select-title">
                                <input type="text" placeholder="国家" value="" class="layui-input">
                                <i class="layui-edge"></i>
                            </div>
                            <dl class="layui-anim layui-anim-upbit">
                                <dd lay-value="" class="layui-select-tips">国家</dd>
                                {foreach $countries as $c}
                                <dd lay-value="{$c.code_two" class="">{$c.name_ch}</dd>
                                {/foreach}

                            </dl>
                        </div>

                    </div>
                    
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th style="min-width: 200px;">SKU</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <!--自动添加渲染多选下拉框-->
                        <tr class="operation">
                            <td colspan="4" class="text-center">
                                <button type="button" class="layui-btn layui-btn-sm" id="product-reset">
                                    <i class="layui-icon layui-icon-refresh"></i>重置
                                </button>
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm calculate" c-type="sku">
                                    <i class="layui-icon layui-icon-cellphone-fine"></i>试算
                                </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                </div>
            </form>
            <div id="channel-sku"></div>
        </div>

        <!--商品定价预算-->
        <div class="layui-tab-item">
            <form class="layui-form inline-form">
                <div class="pull-left">
                <!--【拿货价、国家、重量】-->
                    <div class="layui-inline">
                        <input type="text" name="cost_price" class="layui-input input-cost-price" autocomplete="off" autofocus="autofocus" placeholder="拿货价(￥)">
                    </div>
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <select name="order_country_code" lay-search="">
                                <option value="">国家</option>
                                {foreach $countries as $c}
                                <option value="{$c.code_two}">{$c.name_ch}</option>
                                {/foreach}
                            </select>
                            <div class="layui-form-select">
                                <div class="layui-select-title">
                                    <input type="text" placeholder="国家" value="" class="layui-input">
                                    <i class="layui-edge"></i>
                                </div>
                                <dl class="layui-anim layui-anim-upbit">
                                    <dd lay-value="" class="layui-select-tips">国家</dd>
                                    {foreach $countries as $c}
                                    <dd lay-value="{$c.code_two}" class="">{$c.name_ch}</dd>
                                    {/foreach}
                                </dl>
                            </div>

                        </div>
                    </div>
                    <div class="layui-inline">
                        <input type="number" name="order_weight" class="layui-input input-order-weight" autocomplete="off" autofocus="autofocus" placeholder="货物重量(g)">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal layui-btn-sm calculate-pre-sale-price" c-type="pre-sale-price"><i class="layui-icon layui-icon-cellphone-fine"></i>开始预定价
                        </button>
                    </div>
                </div>
            </form>
            <div id="channel-pre-sale-price"></div>
        </div>


    </div>
</div>
<script type="text/html" id="data-product-template">
    <tr class="product-list">
        <td>
            <div class="sku-select"></div>
        </td>
        <td>
            <div class="layui-inline">
                <input type="number" name="qty[]" value="1" class="layui-input qty" autocomplete="off" placeholder="数量">
            </div>
        </td>
        <td>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-row-add" style="margin-bottom: 3px;">
                <i class="layui-icon layui-icon-add-1"></i>
            </button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm data-row-remove">
                <i class="layui-icon layui-icon-delete"></i>
            </button>
        </td>
    </tr>
</script>

{/block}
{block name="script"}
<script type="text/javascript">
    layui.extend({
        xmSelect: 'xm-select'
    }).use(['layer', 'jquery', 'xmSelect', 'element'], function()
    {
        var layer = layui.layer
            , $ = layui.jquery;
        // 自动添加报价单详情
        if($(".layui-table .product-list").length < 1)
        {
            var html = $("#data-product-template").html();
            $(".layui-table tbody").prepend(html);
            renderSearch($(".sku-select:last").get(0));
        }
        // 添加行
        $(".layui-table").on("click", ".data-row-add", function()
        {
            var html = $("#data-product-template").html();
            $(".layui-table .product-list:last").after(html);
            renderSearch($(".sku-select:last").get(0));
        });

        // 删除行
        $(".layui-table").on("click", ".data-row-remove",function()
        {
            if($(".layui-table .product-list").length == 1)
            {
                layer.msg('只有一条不允许删除。', {time : 2000});
                return;
            }
            $(this).parent().parent().remove();
        });

        // 重置
        $("#product-reset").click(function()
        {
            $(".product-list").remove();
            var html = $("#data-product-template").html();
            $(".layui-table tbody").prepend(html);
            renderSearch($(".sku-select:last").get(0));
        });

        $(".calculate").click(function(evt)
        {
            evt.preventDefault();
            var $this = $(this)
                , $form = $(this).parents("form")
                , cType = ($this.attr("c-type"))
                , url = "/cha.express_freight_calculate/index?type=" + cType;
            layer.load(0, {shade: false});
            $.post(url, $form.serialize()).done(function(response)
            {
                layer.closeAll('loading');
                if($.type(response) === 'object')
                {
                    var icon = response.code == 1 ? 6 : 5;
                    layer.msg(response.msg, {icon: icon, time: 1500});
                    return;
                }
                $("#channel-" + cType).html(response);
            }).error(function(xhr)
            {
                layer.msg('服务器异常，请稍后重试~', {icon: 5});
                layer.closeAll('loading');
            });
        });

        //商品预订价
        $(".calculate-pre-sale-price").click(function(evt)
        {
            evt.preventDefault();
            var $this = $(this)
                , $form = $(this).parents("form")
                , cType = ($this.attr("c-type"))
                , url = "/cha.express_freight_calculate/preSalePrice?type=" + cType;
            layer.load(0, {shade: false});
            $.post(url, $form.serialize()).done(function(response)
            {
                layer.closeAll('loading');
                if($.type(response) === 'object')
                {
                    var icon = response.code == 1 ? 6 : 5;
                    layer.msg(response.msg, {icon: icon, time: 1500});
                    return;
                }
                $("#channel-" + cType).html(response);
            }).error(function(xhr)
            {
                layer.msg('服务器异常，请稍后重试~', {icon: 5});
                layer.closeAll('loading');
            });
        });

        /**
         * 渲染多选下拉框
         * @param node 需要渲染的节点
         */
        function renderSearch(node)
        {
            var xargs = {
                el: node,
                radio: true,
                clickClose: true,
                data: [],
                prop: {
                    name: "sku",
                    value: "sku",
                },
                name: "sku[]",
                filterable: true,
                remoteSearch: true,
                remoteMethod: function (text, callback, show)
                {
                    text = text.trim();
                    $.get("{:url('wms/product/get')}", {sku: text, more: 1}).done(function (response)
                    {
                        if(response.code != 1) return callback([]);
                        callback(response.data);
                    });
                }
            };
            layui.xmSelect.render(xargs);
            $("xm-select").css({"min-height": "30px"});
        }
    });
</script>
{/block}

